<template>
    <div id="box">
        <div class="box_header">
            <i></i>
            <span class="spa">同类商品推荐</span>
        </div>
        <div class="box_content">
            <van-icon name="arrow-left" class="lef" size="30" color="#dddddd" @click="MyPrev"/>
            <van-swipe class="my-swipe" indicator-color="#27ba9b" ref="swipe" swipe-indicator-size="20px">
                <van-swipe-item>
                    <a class="my-li" v-for="item in con">
                        <img v-lazy="item.picture" alt="">
                        <p class="p1">{{item.desc}}</p>
                        <p class="p2">{{item.price}}</p>
                    </a>
                </van-swipe-item>
                <van-swipe-item>
                    <a class="my-li" v-for="item in con">
                        <img v-lazy="item.picture" alt="">
                        <p class="p1">{{item.desc}}</p>
                        <p class="p2">{{item.price}}</p>
                    </a>
                </van-swipe-item>
                <van-swipe-item>
                    <a class="my-li" v-for="item in con">
                        <img v-lazy="item.picture" alt="">
                        <p class="p1">{{item.desc}}</p>
                        <p class="p2">{{item.price}}</p>
                    </a>
                </van-swipe-item>
                <van-swipe-item>
                    <a class="my-li" v-for="item in con">
                        <img v-lazy="item.picture" alt="">
                        <p class="p1">{{item.desc}}</p>
                        <p class="p2">{{item.price}}</p>
                    </a>
                </van-swipe-item>
            </van-swipe>
            <van-icon name="arrow" class="rig" size="30" color="#dddddd" @click="MyNext"/>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                con:[]
            }
        },
        async mounted(){
            // console.log(this.$route)
            const res = await this.$.getGoods(this.$route.params);
            this.con = res.data.result.hotByDay
            // console.log(this.con)
        },
        methods:{
            MyPrev(){
                const btn = this.$refs['swipe']
                btn.prev();
            },
            MyNext(){
                const btn = this.$refs['swipe']
                btn.next();
            },
        }
    }
</script>
<style lang="less" scoped>
    @swipe-indicator-size:15px;

    #box{
        width:1240px;
        height:460px;
        /*border:1px solid black;*/
        margin:20px auto;

        .box_header{
            width:1240px;
            height:80px;
            line-height:80px;
            padding-left:20px;
            display:flex;
            i{
                width:10px;
                height:10px;
                display:inline-block;
                font-size:20px;
            }
            .spa{
                font-size:20px;
            }
        }
        .box_content{
            width:100%;
            position:relative;
            display:flex;
            /*border:1px solid red;*/
            padding:0 40px;
            .lef{
                width:30px;
                height:30px;
                position:absolute;
                left:5px;
                top:50%;
                margin-top:-15px;
            }
            .rig{
                width:30px;
                height:30px;
                position:absolute;
                right:5px;
                top:50%;
                margin-top:-15px;
            }

            .my-swipe .van-swipe-item {
                width:1240px;
                color: #fff;
                font-size: 20px;
                text-align: center;
                display: flex;
                justify-content: space-around;
                height:320px;
                margin-bottom:20px;
                .my-li{
                    width:240px;
                    /*border:1px solid black;*/
                    margin:0 20px 10px 20px;
                    text-align:center;
                    img{
                        padding:20px;
                        width:230px;
                        height:230px;
                    }
                    .p1{
                        width:160px;
                        color:#666666;
                        margin:0 auto;
                        font-size:16px;
                    }
                    .p2{
                        color:#cf4444;
                        font-size:14px;
                        margin-top:15px;
                    }
                }
            }
        }
    }
    *{
        padding:0;
        margin:0;
    }
</style>